<template>
  <div :id="elId" :style="{width, height}"></div>
</template>
<script type="text/javascript">
import 'static/js/bioscience.js'
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/bar')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  name: 'histogram',
  data() {
    return {
      options: {},
      elId: 'chart' + Math.random().toString(36).substr(3, 10),
      myChart: null,
      width: '100%',
      height: '100%'
    }
  },
  props: {
    title: {
      type: Object,
      default: () => {
        return {
          text: '仪器状态汇总',
          subtext: '(数量/台)'
        }
      }
    },
    legend: {
      type: Object
    },
    chartData: {
      type: Object
    }
  },
  watch: {
    'chartData.series': function(newVal, oldVal) {
      if (JSON.stringify(newVal) != '' && JSON.stringify(newVal) != JSON.stringify(oldVal)) {
        this.setChartData()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      let _this = this
      // this.resizeEchartsContainer();
      this.myChart = echarts.init(document.getElementById(this.elId), 'bioscience')
      this.setChartData()
      this.resizeEchartsContainer()
      // window.onresize = function () {
      //   _this.resizeEchartsContainer()
      // }
    })
  },
  methods: {
    resizeEchartsContainer: function() { // 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
      if (this.myChart) {
        let echartsDiv = document.getElementById(this.elId)
        echartsDiv.style.width = (echartsDiv.parentNode.offsetWidth) + 'px'
        echartsDiv.style.height = (echartsDiv.parentNode.offsetHeight) + 'px'
        this.myChart.resize()
      }
    },
    setChartData() {
      let _this = this
      this.options = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '直接访问',
          type: 'bar',
          barWidth: '60%',
          data: [10, 52, 200, 334, 390, 330, 220]
        }]
      }
      // this.options.xAxis = this.chartData.xAxis
      // this.options.yAxis = this.chartData.yAxis
      // this.options.series = this.chartData.series
      // console.log(this.options)
      // this.myChart.setOption(Object.assign({},this.options,this.chartData), true)
      this.myChart.setOption(this.options, true)
    }
  },
  beforeDestroy() {
    this.myChart.dispose()
    this.myChart = null
  }
}

</script>
